<!-- 我的列表 -->

<template>
  <div class="DashboardPage-MyList">
    <!-- 待选列表 -->
    <EasyScroll class="DashboardPage-MyList-init" full>
      <el-empty v-if="!charts_select.length" description="暂无图表" />

      <draggable
        :list="charts_select"
        :group="{ name: 'charts', pull: 'clone', put: false }"
        :clone="toClone"
        :move="toMove"
      >
        <div v-for="item in charts_select" :key="item.id" v-bind="getProps(item)" class="flexCC">
          <span>{{ item.dashboardName }}</span>
        </div>
      </draggable>
    </EasyScroll>

    <!-- 六个区域 -->
    <div class="DashboardPage-MyList-show">
      <draggable
        v-for="(myList, i) in listArray"
        :key="i"
        :list="myList"
        :animation="200"
        group="charts"
        draggable=".flexCC"
        @change="(e) => toChange(e, myList, i + 1)"
      >
        <div v-for="item in myList" :key="item.id || item.time" v-bind="getProps(item.content)" class="flexCC">
          <span> {{ (item.content || {}).dashboardName }}</span>
        </div>

        <div v-if="myList.length" class="CoreWeb-FormImage-del CoreWeb-FormImage-del-show" @click="toDel(myList)">
          <i class="el-icon-close" />
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import draggable from 'vuedraggable'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyList',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('charts', 'charts_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(draggable),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      listArray: Array(this.max).fill().map(() => []),
    }
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听列表就绪
     */
    readyList: {
      immediate: true,
      handler() {
        setTimeout(this.setListArray, 100)
      },
    },
  },

  methods: {
    /**
     * 设置列表数组
     */
    setListArray() {
      const listArray = Array(this.max).fill().map(() => [])
      this.list.forEach((item) => {
        if (item.point <= this.max) {
          listArray[item.point - 1].push(item)
        }
      })
      this.listArray = listArray
    },

    /**
     * 待选列表的移动
     */
    toMove(e) {
      // 自身内部不显示移动效果
      if (e.from === e.to) return false
    },

    /**
     * 从左侧拖拽后复制
     */
    toClone(element) {
      return {
        id: '', // ID 为空，以 time 为唯一标识
        boardCode: element.boardCode,
        dashboardId: element.id,
        project: element.project,
        content: element,
        time: Date.now(),
      }
    },

    /**
     * 六个区域的改变
     */
    toChange({ added, removed }, list, point) {
      if (added) {
        const { newIndex, element: { id, dashboardId, boardCode, project } } = added

        // 删除多余元素
        if (list.length > 2) this.one.del.ids = list.splice(2, list.length - 2).map((item) => item.id)

        if (id) { // 从地图挪动位置
          if (list.length > 1) { // 目标位置已有
            const old = newIndex ? list.shift() : list.pop()
            this.one.edit = { ...list[0], point }
            this.one.swap = { ...old, point: list[0].point }
          } else { // 目标位置为空
            this.one.edit = { ...added.element, point }
          }
        } else { // 从左侧拖拽复制
          if (list.length > 1) { // 目标位置已有
            const old = newIndex ? list.shift() : list.pop()
            if (old.dashboardId === dashboardId) list[0].id = old.id
            else this.one.edit = { ...old, dashboardId }
          } else { // 目标位置为空
            this.one.add = { dashboardId, boardCode, point, project }
          }
        }
        // 打开修改开关
        this.startEdit()
      } else if (removed) {
        if (this.one.swap) {
          list.push(this.one.swap)
        }
      }
    },

    /**
     * 点击删除
     */
    toDel(list) {
      this.one.del.ids = list.map((item) => item.id)
      this.startEdit()
    },

    /**
     * 获取图片属性
     */
    getProps(obj) {
      if (CORE.isEmpty(obj)) return null

      const backgroundImage = `url(${CORE.image(obj.fileUrl)})`
      return { style: { backgroundImage } }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
